<template>
    <div>
        <el-container>
          <!--顶部-->
          <el-header>              
              <div class="header">
                  <el-row>
                      <el-col :span=4 class="headerCol">
                          <el-image :src="require('../../../img/littleIcon/doctorLogo.png')"></el-image>
                      </el-col>
                      <el-col :span=12 class="headerSex">
                        <el-steps :active="1" finish-status="success" simple='true'>
                            <el-step title="选择套餐" icon="el-icon-edit"></el-step>
                            <el-step title="查看套餐" icon="el-icon-edit"></el-step>
                            <el-step title="体检预约" icon="el-icon-edit"></el-step>
                        </el-steps>
                      </el-col>
                  </el-row>
              </div>
          </el-header>
            <el-divider></el-divider>
          <!-- <el-image class="el-image" :src="require('../../../junM/img/loginbackground.jpeg')"></el-image> -->

          <el-main>
              <el-row class="text-row">
                  <el-col :span='24'>
                    <h3>
                        {{this.$store.state.setmealItem.name}}
                        <label style="color:red">&nbsp;&nbsp;价格：{{this.$store.state.setmealItem.price}}&nbsp;元</label><br>
                        
                    </h3>
                    <el-tag type="danger" effect="plain" hit='true' >{{this.$store.state.setmealItem.sex}}</el-tag>&nbsp;&nbsp;
                    <el-tag type="danger" effect="plain" hit='true' >{{this.$store.state.setmealItem.minage}}-{{this.$store.state.setmealItem.maxage}}</el-tag>
                    <el-button type="primary" icon="el-icon-edit" class="btnOrder" @click="btnOrder">立即预约</el-button><br><br>
                    <label style="font-size:16px"><label style="color:red;">注意：</label>{{this.$store.state.setmealItem.remark}}</label>
                  </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row class="text-row">
                  <el-col :span='24'>                      
                      <router-link to="/order" tag="p">
                      <el-image class='icon' :src="require('../../../junM/img/mealdedail1.png')"></el-image>
                      预约需知</router-link>
                  </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row class="text-row">
                  <el-col :span='24'>
                      <div>
                          <el-image class='icon' :src="require('../../../junM/img/mealdedail2.png')"></el-image>
                          套餐详情
                      </div>
                  </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                  <el-col :span='24'>
                      <el-table :data="setmealdetailList" border style="width: 100%" stripe>
                          <el-table-column
                            prop="name"
                            label="项目名称"
                            width="auto">
                            </el-table-column>
                            <el-table-column
                            prop="context"
                            label="项目内容"
                            width="auto">
                            </el-table-column>
                            <el-table-column
                            prop="price"
                            label="项目价格"
                            width="auto">
                            </el-table-column>
                      </el-table>
                  </el-col>
              </el-row>
          </el-main>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            setmealdetailList:[]
        }
    },
    methods:{
        goBackNext(){
            this.$router.push("/setmeal");
        },
        setmealdetailInit(){
            axios.get("/setmeal/queryBySetmaelId",{params:{setmealId:this.$store.state.setmealItem.id}})
            .then(res => {
                res.data[0].tCheckgroups.filter((item)=>{
                    let contextName=""
                    let sumPrice=0;
                    item.tCheckitems.filter((items)=>{
                        contextName+=items.name+"、"
                        sumPrice+=items.price
                    })
                    this.setmealdetailList.push({
                        name:item.name,
                        context:contextName.substring(0,contextName.length-1),
                        price:sumPrice
                    })
                })
            })
            .catch(err => {
                console.log(err); 
            })
        },
        btnOrder(){
           /*  if(this.$store.state.loginFlag==false){
                alert('user为空');
                alert(this.$store.state.loginFlag)
                this.$router.push("/orderapply"); 
            }else{
                alert('user不为空');
                // alert(this.$store.state.loginFlag);

            
            }     */ 
            axios.get("/order/queryByMemberId")
            .then(res => {
                if(res.data){
                    this.$message({
                        message:'该用户近期已有预约，不能继续预约',
                        type:'warning'
                    })
                }else{
                    this.$router.push("/orderapply"); 
                }
            })
            .catch(err => {
                this.$router.push("/login")
                console.error(err); 
            })      
        }
    },
    created(){
        this.setmealdetailInit()
    }
}
</script>

<style scoped>
    /* .header span{
        height: 40px;
    }
    .header{
        background-color: black;
        font-size: 25px;
        color: white;
        margin-top: 3px;
    } */
    .headerSex{
        margin-top:20px;
    }
    .headerCol{
        margin-top: 10px;
        text-align: left;
    }
    /* .el-image{
        width: 1290px;
        margin: 0 auto;
        height: 350px;
    } */
    .text-row{
        text-align: left;
        cursor: pointer;
    }
    .icon{
        width: 20px;
        height: 20px;
    }
    .btnOrder{
        float: right;
    }

</style>